<template>
  <div id="type">

    <!-- <div>
      查询
    </div> -->
    <div id="text"
         class="clear">
      <p>明细数据</p>
      <div>
        <el-button type="success"
                   size="small"
                   @click="Add"
                   round
                   style="width:80px">添加</el-button>
      </div>
    </div>

    <div>
      <template>
        <el-table :data="tableData"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{'text-align':'center',background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}"
                  :cell-style="{'text-align':'center',border:'1px solid #DCDCDC'}"
                  tooltip-effect="dark">
          <el-table-column prop="user_num"
                           label="员工编号"
                           width="180">
          </el-table-column>
          <el-table-column prop="user_name"
                           label="姓名"
                           width="180">
          </el-table-column>
          <el-table-column prop="user_tel"
                           label="联系方式">
          </el-table-column>
          <el-table-column prop="user_company"
                           label="所属门店"
                           width="180">
          </el-table-column>
          <el-table-column prop="time"
                           label="入职时间"
                           width="180">
          </el-table-column>
          <el-table-column prop="user_password"
                           label="登录密码"
                           width="140">
          </el-table-column>

          <el-table-column fixed="right"
                           label="操作"
                           width="150">
            <template slot-scope="scope">
              <el-button @click="delData(scope.row)"
                         size="small"
                         type="danger">删除</el-button>
              <el-button type="warning"
                         size="small"
                         @click="Edit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <el-dialog title="员工信息修改"
               :visible.sync="dialogVisible"
               width="30%"
               :center='true'>
      <el-form ref="form"
               :model="form"
               label-width="80px">
        <el-form-item label="员工编号">
          <el-input v-model="form.num"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="form.name"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="所属门店">
          <el-input v-model="form.shop"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-input v-model="time"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item id="el">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="onSure">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="添加员工"
               :visible.sync="Visible"
               width="30%"
               :center='true'>
      <el-form ref="adddata"
               :model="adddata"
               label-width="80px">
        <el-form-item label="员工编号">
          <el-input v-model="adddata.num"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="adddata.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="adddata.tel"></el-input>
        </el-form-item>
        <el-form-item label="所属门店">
          <el-input v-model="adddata.shop"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="adddata.time"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                          style="width:325px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="adddata.password"></el-input>
        </el-form-item>
        <el-form-item id="el">
          <el-button @click="Visible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addUser">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="count"
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 15, 20]"
                     :total="totalData.length">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
      Visible: false,
      totalData: [],
      page: 1,
      count: 5,
      time: '',
      form: {
        num: '',
        name: '',
        tel: '',
        shop: '',
        time: '',
        password: ''
      },
      adddata: {
        num: '',
        name: '',
        tel: '',
        shop: '',
        time: '',
        password: '',
      },
      currentPage: 1,
    }
  },
  methods: {
    delData (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
          if (action == "confirm") {
            this.$axios({
              url: "/api/worker/remove",
              data: {
                id: row.user_id
              },
              method: "post"
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 2000,
              });
              this.Search()
            })
          } else {
            this.$message({
              type: 'info',
              message: '已取消删除',
              duration: 2000,
            });
          }

        }
      })
    },

    //添加员工
    addUser () {
      this.Visible = false
      this.$axios({
        url: '/api/worker/getuser',
        method: 'post',
        data: {
          num: this.adddata.num,
          name: this.adddata.name,
          tel: this.adddata.tel,
          shop: this.adddata.shop,
          time: this.adddata.time,
          password: this.adddata.password
        }
      }).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message({
            message: '添加员工成功！',
            type: 'success',
            duration: 2000,
          })
        } else {
          this.$message({
            message: '添加员工失败！',
            type: 'warning',
            duration: 2000,
          })
        }
        this.Search()
        this.adddata = {}
      })
    },

    Edit (row) {
      console.log(row);
      this.dialogVisible = true;
      this.form.id = row.user_id
      this.form.num = row.user_num,
        this.form.name = row.user_name
      this.form.time = row.user_work_time
    },
    onSure () {
      this.dialogVisible = false
      this.$axios({
        url: '/api/worker/edit',
        method: 'post',
        data: {
          id: this.form.id,
          tel: this.form.tel,
          password: this.form.password,
          shop: this.form.shop
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功！',
            type: 'success',
            duration: 2000,
          })
          this.form.tel = "",
            this.form.password = "",
            this.form.shop = "",
            this.Search()
        }
      })
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.count = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
    },
    Add () {
      this.Visible = true
    },
    Search: function () {
      this.$axios({
        url: '/api/worker/getworker',
      }).then((res) => {

        this.totalData = res.data.data
        this.totalData.forEach((v, i) => {
          this.time = this.totalData[i].user_work_time
          v.time = this.time.substring(0, 10)
          this.time = this.time.substring(0, 10)
        });
      })
    }
  },
  mounted: function () {
    this.Search()
  },

  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count)
    }
  }
}

</script>

<style lang="less" scoped>
#text {
  margin: 20px 0;
  background-color: rgb(242, 242, 242);
  height: 60px;
  line-height: 60px;
}
#text p {
  margin-left: 30px;
  float: left;
}
#el {
  text-align: center;
}

#text div {
  float: right;
  margin-right: 50px;
}
.block {
  width: 500px;
  margin: 20px auto;
}
</style>